const path = require('path') // 重启
const pxToViewport = require('postcss-px-to-viewport')

module.exports = {
  // webpack 配置 （webpack认识了@符号）
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src'),
      '@scss': path.resolve(__dirname, 'src/assets/styles'),
    },
  },

  // react-scripts 4.0 的写法：
  // 将来在页面中你写的仍然是px绝对单位， 但是在webpack构建打包时 自动将px=》vw
  style: {
    postcss: {
      plugins: [
        pxToViewport({
          // 视口宽度，就是基准尺寸，一般使用 375px（设计师的设计稿一般也按该宽度来设计）
          viewportWidth: 375,
        }),
      ],
    },
  },
}
